<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                template="layout/bismillah_template.xhtml">
    <style>
        .pic {
            margin-right: 2px;
        }
        .barsearch {
            height: 14px;
            width: 100px;
        }
        .barsearchbutton {
            border-width: 1px;
            background-color: #{ a4jSkin.generalBackgroundColor
            }
                ;
        }
    </style>

    <ui:define name="content">    
        <h:form id="serviceListForm">
            <h:panelGrid width="100%" >
                <f:facet name="header">
                    <rich:toolbar height="26" itemSeparator="grid">
                        <rich:toolbarGroup>
                            <a4j:commandLink id="newServiceLink" oncomplete="#{rich:component('editServicePanel')}.show()" reRender="serviceDetail">
                                <h:graphicImage value="/images/icons/create_doc.gif" styleClass="pic"  style="border:0" />
                                <rich:tooltip id="tt_create_service" styleClass="tooltip" layout="block">
                                    <span style="white-space: nowrap"> create 
                                        <strong>new service</strong></span>
                                </rich:tooltip>
                            </a4j:commandLink>
                            <a4j:commandLink id="newCategoryLink" oncomplete="#{rich:component('editCategoryPanel')}.show()" reRender="categoryDetail">
                                <h:graphicImage value="/images/icons/create_folder.gif" styleClass="pic" style="border: 0"/>
                                <rich:tooltip id="tt_create_category" styleClass="tooltip" layout="block">
                                    <span style="white-space: nowrap"> create 
                                        <strong>new category</strong></span>
                                </rich:tooltip>
                            </a4j:commandLink>
                            
                            <h:graphicImage value="/images/icons/copy.gif" styleClass="pic" />
                        </rich:toolbarGroup>
                        <rich:toolbarGroup>
                            <h:graphicImage value="/images/icons/save.gif" styleClass="pic" />
                            <h:graphicImage value="/images/icons/save_as.gif" styleClass="pic" />
                            <h:graphicImage value="/images/icons/save_all.gif" styleClass="pic" />
                        </rich:toolbarGroup>
                        <rich:toolbarGroup location="right">
                            <h:inputText styleClass="barsearch" />
                            <h:commandButton styleClass="barsearchbutton" onclick="return false;" value="Search" />
                        </rich:toolbarGroup>
                    </rich:toolbar>
                </f:facet>

                <rich:dataTable id="servicesTable" var="record" value="#{serviceController.services}" ajaxKeys="#{serviceController.keys}" rows="8"  columnsWidth="2%,20%,35%,10%,10%,10%,10%,3%">
                    <rich:column  accept="">
                        <f:facet name="header">
                            <h:outputText value="ID" />
                        </f:facet>
                        <h:outputText value="#{record.id}" id="idee" />
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                                <h:outputText value="Name" />
                        </f:facet>
                        <h:outputText value="#{record.name}" id="name" />
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="Description" />
                        </f:facet>
                        <h:outputText value="#{record.description}" id="description" />
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="Category" />
                        </f:facet>
                        <h:outputText value="#{record.category}" id="category" />
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="Retail Price" />
                        </f:facet>
                        <h:outputText value="#{record.retailPrice}" id="retailPrice" />
                    </rich:column>


                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="Credit Price" />
                        </f:facet>
                        <h:outputText value="#{record.creditPrice}" id="creditPrice" />
                    </rich:column>


                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="Stock Price" />
                        </f:facet>
                        <h:outputText value="#{record.stockPrice}" id="stockPrice" />
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            Actions
                        </f:facet>
                        <a4j:commandLink id="editlink" oncomplete="#{rich:component('editServicePanel')}.show()" reRender="serviceDetail">
                            <h:graphicImage value="/images/icons/edit.gif" style="border:0" />
                            <f:setPropertyActionListener value="#{record}"
                                                         target="#{serviceController.service}" />
                        </a4j:commandLink>
                        <a4j:commandLink id="deletelink" oncomplete="#{rich:component('deleteServicePanel')}.show()">
                            <h:graphicImage value="/images/icons/delete.gif" style="border:0" />
                            <f:setPropertyActionListener value="#{record}"
                                                         target="#{serviceController.service}" />
                        </a4j:commandLink>
                    </rich:column>
                </rich:dataTable>
                <rich:dataScroller for="servicesTable" maxPages="5"/>
            </h:panelGrid>
        </h:form>
        <ui:include src="service.xhtml" />
        <ui:include src="deleteProduct.xhtml" />
        <ui:include src="editCategory.xhtml" />
    </ui:define>
</ui:composition>